<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 这一段代码有三个角色 effectFn副作用域函数 obj对象 text属性
        effect(function effectFn() {
            document.body.innerHTML = obj.text
        })

        // 2. 如果两个副作用域函数同时读取了一个属性名
        effect(function effectFn2() {
            document.body.innerHTML = obj.text
        })
        effect(function effectFn3() {
            document.body.innerHTML = obj.text
        })
        // 3. 如果一个副作用域函数读取了多个属性名
        effect(function effectFn3() {
            document.body.innerHTML = obj.text
            document.querySelector('div').innerHTML = obj.text2
        })

        // 4. 如果不同的副作用域函数读取了不同对象的不同属性名
        effect(function effectFn4() {
            document.body.innerHTML = obj1.text1
        })
        effect(function effectFn5() {
            document.querySelector('div').innerHTML = obj2.text2
        })
    </script>
</body>

</html>